/**
 * Created by zhulizhe on 2017/8/16.
 */
import React, {Component} from 'react';
import {
    Text,
    View,
    TouchableOpacity,
    Image,
    FlatList,
    InteractionManager,
    StyleSheet
} from 'react-native';
import Constant from '../Contant'
import NetRequest from '../util/NetRequest'
import Ionicons from 'react-native-vector-icons/Ionicons';

import {observable, action, computed, observe} from 'mobx'
import {observer} from 'mobx-react/native'
import Swipeout from 'react-native-swipeout';
import addressMgrStore from '../store/AddrMgrStore'


@observer
export default class AddressList extends Component {
    static navigationOptions = {
        title: '地址管理'
    };

    constructor(props) {
        super(props);
        this.navigate = this.props.navigation.navigate;
    }


    render() {
        return <View style={{flex: 1,backgroundColor:Constant.GRAYBGCOLOR}}>
            <FlatList
                onRefresh={this._onRefresh.bind(this)}
                refreshing={false}
                onEndReachedThreshold={0.1}
                onEndReached={this._onEndReached.bind(this)}
                data={addressMgrStore.deliveryList}
                keyExtractor={(item, index) => index}
                style={{marginTop: 15}}
                renderItem={({item}) => <AddressCell item={item} callback={this._selectAddress.bind(this)}
                deleteCallBack={this._deleteAddress.bind(this)}
                defaultAddress={this.setDefaultAddress.bind(this)}
                />}
            />
            <TouchableOpacity style={{backgroundColor: 'white', justifyContent: 'center', alignItems: 'center', padding: 13}} onPress={()=>{
                this.navigate('AddOrEditAddress',{editAddress:null});
            }}>
                <View style={{flexDirection: 'row', alignItems: 'center'}}>
                    <Image source={require('../../asserts/address/Newly_added.png')}></Image>
                    <Text style={{color: '#349AF9', fontSize: 15, marginLeft: 5}}>新增地址</Text>
                </View>
            </TouchableOpacity>

        </View>

    }

    setDefaultAddress(id){
        var defaultParam={
            deliveryAddressId:id
        };
         NetRequest.defaultAddress(defaultParam).then((data)=>{
             LOG('设置默认地址-------'+JSON.stringify(data));
             addressMgrStore.refreshDeliveryList();
         })
    }
    _selectAddress(item){
        if(addressMgrStore.deliveryAddressListMgr.isSelectAddress){
            addressMgrStore.deliveryAddressListMgr.setIsSelectAddress(false);
            addressMgrStore.deliveryAddressListMgr.setSelectedAddress(item);
            this.props.navigation.goBack();
        }else {
            this.navigate('AddOrEditAddress',{editAddress:item})
        }
    }
    _deleteAddress(id){
        let deleteParam={
            deliveryAddressId:id
        };
        NetRequest.deleveryDelete(deleteParam).then((data)=>{
            LOG('删除地址-------'+JSON.stringify(data));
            addressMgrStore.refreshDeliveryList();
        });

    }
    _onRefresh() {
        addressMgrStore.refreshDeliveryList();
    }

    _deliveryList(){
        InteractionManager.runAfterInteractions(() => {
            NetRequest.getAddressList().then((data)=>{
                LOG('地址列表-------'+JSON.stringify(data))
            });
        });
    }
    componentDidMount(){
        this._deliveryList();
    }

    _onEndReached() {

    }
}

class AddressCell extends Component {
    render() {
        swipeoutBtns = [
            {

                text: '删除',
                backgroundColor: 'red',
                onPress: function () {
                    deleteCallBack(id)
                },
            }

        ];

        // {   "address":{
        //          "cityName":"香港特別行政區",
        //         "appendingAddress":"0003",
        //         "mapAddress":"香港特別行政區中西區香港特別行政區中西區德辅道中靠近香港"},
        //     "position":{
        //     "longitude":111.22222222222,
        //         "latitude":22.28196044921875}
        //         ,"name":"Anna",
        //     "phoneNum":"555-522-8243"
        // }


        let {phoneNum,name,address,id,addressTagName,defaultFlag} = this.props.item ;
        let {cityName,mapAddress,appendingAddress} = address ;
        let {callback,deleteCallBack,defaultAddress} = this.props;
        return <Swipeout right={swipeoutBtns}>
            <TouchableOpacity style={{
                flexDirection: 'row',
                backgroundColor: '#fff',
                alignItems: 'center',
                marginTop: 1,
            }} onPress={() => {
                callback(this.props.item);
            }}>
                <View style={{marginLeft: 10, marginVertical: 10, flex: 1}}>

                    <View style={{flexDirection: 'row', alignItems: 'center'}}>
                        <Text style={{fontSize: 15, fontWeight: '100', color: 'black'}}>{name}</Text>
                        <Text style={{marginLeft: 30, color: 'black'}}>{phoneNum}</Text>
                        {
                            addressTagName?(<View style={{paddingLeft:10}}>
                                <Label title={addressTagName}/>
                            </View>) : null
                        }
                    </View>
                    <View style={{flexDirection: 'row', alignItems: 'center'}}>
                        <Text numberOfLines={2} style={address_Liststyles.content}>{mapAddress+appendingAddress}</Text>
                    </View>
                    <View style={{flexDirection: 'row', alignItems: 'center',marginTop:10}}>
                        <TouchableOpacity style={{flexDirection:'row',alignItems: 'center',flex:1}} activeOpacity={0.9} onPress={()=>{
                            defaultAddress(id)
                        }}>
                            <Ionicons name="ios-checkmark-circle" size={18} color={defaultFlag==true?Constant.BLUECOLOR:'gray'}/>
                            <Text style={{marginLeft:3}}>设为默认</Text>
                        </TouchableOpacity>
                        <View style={{flexDirection: 'row', alignItems: 'center',marginRight:10}}>
                            <Image style={{resizeMode: 'contain',marginRight:3}} source={require('../../asserts/address/edit.png')}></Image>
                            <Text>编辑</Text>
                        </View>
                    </View>
                </View>
            </TouchableOpacity>
        </Swipeout>
    }
}
export const Label = ({title})=>{
    return <View style={{
        borderWidth:StyleSheet.hairlineWidth,
        borderColor:Constant.BLUECOLOR,
        paddingVertical:2,
        paddingHorizontal:10,
        borderRadius:2
    }}>
        <Text style={{fontSize:13,color:Constant.BLUECOLOR}}>{title}</Text>
    </View>
}
const address_Liststyles = {
    title: {
        fontSize: 15,
        fontWeight: '100',
        color: 'black'
    },
    content: {
        fontSize: 13,
        fontWeight: '100',
        color: 'gray',
    }

}